<template>
    <div class="weather-tool" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
        <div class="weather-abstract">
            <span>&nbsp;{{ weathercity }}</span>
            <span class="city_state">{{ weather.current_condition }}</span>
            <span class="city_temperature">
        <em>{{ weather.low_temperature }}</em>° &nbsp;/&nbsp; <em>{{ weather.high_temperature }}</em>°
      </span>
            <tt-icon type="arrow_down" color="#fff" size="14"></tt-icon>
        </div>
        <div class="y-weather" v-show="showPopup">
            <div class="w-header">
                <span class="bui-icon icon-locationweather bui-vm" @click="changeLocation" ga_event="mh_change_city">&nbsp;{{ weathercity }}</span>
                <span class="wind bui-vm">{{ weather.wind_direction }}{{ weather.wind_level }}级</span>
                <span class="air vm" :style="{backgroundColor: aqiColor}">{{ weather.quality_level }}&nbsp;{{ weather.aqi }}</span>
            </div>

            <ul class="days-weather" v-if="showWeather">
                <li class="bui-left day">
                    <span class="title">今天</span>
                    <div :title="weather.current_condition"
                         class="weather-icon" :class="[iconClass.today]"></div>
                    <span class="temperature">
              <em>{{  weather.low_temperature }}</em>&#176;
              &#47;
              <em>{{ weather.high_temperature }}</em>&#176;
          </span>
                </li>
                <li class="bui-left day">
                    <span class="title">明天</span>
                    <div :title="weather.tomorrow_condition"
                         class="weather-icon" :class="[iconClass.tom]"></div>
                    <span class="temperature">
              <em>{{ weather.tomorrow_low_temperature }}</em>&#176;
              &#47;
              <em>{{ weather.tomorrow_high_temperature }}</em>&#176;
          </span>
                </li>
                <li class="bui-left day">
                    <span class="title">后天</span>
                    <div :title="weather.dat_condition"
                         class="weather-icon" :class="[iconClass.dat]"></div>
                    <span class="temperature">
              <em>{{ weather.dat_low_temperature }}</em>&#176;
              &#47;
              <em>{{ weather.dat_high_temperature }}</em>&#176;
          </span>
                </li>
            </ul>
            <div class="city-select" v-else>
                <div class="clearfix">
                    <div class="bui-left select-style">
                        <tt-select v-model="province" placeholder="省份" @change="handleProvinceChange" @visible-change="isSelecting">
                            <tt-option
                                    v-for="item in provinces"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </tt-option>
                        </tt-select>
                    </div>
                    <div class="bui-right select-style">
                        <tt-select v-model="city" placeholder="城市" @visible-change="isSelecting">
                            <tt-option
                                    v-for="item in citys"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </tt-option>
                        </tt-select>
                    </div>
                </div>
                <div class="action clearfix">
                    <a href="javascript:;" class="bui-left ok-btn" @click="onSubmitClick">确定</a>
                    <a href="javascript:;" class="bui-right cancel-btn" @click="onCancelClick">取消</a>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less">
    @import "./weatherbox.less";
</style>

<script>
  import reqwest from 'reqwest';
  import Cookies from 'js-cookie';

  function airColor(aqi) {
    if (aqi >= 0 && aqi <= 100) {
      return '#5cbf4c';
    }
    if (aqi >= 101 && aqi <= 200) {
      return '#ff9f2d';
    }
    if (aqi >= 201) {
      return '#ff5f5f';
    }
    return 'rgba(214, 117, 3, 0.8)';
  }

  export default {
    name: 'WeatherBox',
    props: {
      weatherCityUrl: {
        type: String,
        default: '/stream/widget/local_weather/city/'
      },
      weatherDataUrl: {
        type: String,
        default: '/stream/widget/local_weather/data/'
      }
    },
    data() {
      return {
        provinces: [],
        citys: [],
        rs: null,
        province: '北京',
        city: '北京',
        weathercity: '',
        weather: {},
        iconClass: {},
        showWeather: true,
        showPopup: false,
        selecting: false,
        aqiColor: ''
      }
    },
    mounted() {

      var self = this;

      if (window.localStorage) {

        var lastCity = localStorage.getItem('weather_city');

        if (lastCity) {
          lastCity = JSON.parse(lastCity);
          this.city = lastCity.city;
          this.province = lastCity.province;
        }
      }

      this.onSubmitClick();

      reqwest({
        url: this.weatherCityUrl,
        method: 'get',
        success: function (response) {

          var rs = response && response.data ? response.data : false;
          var provinces = [];
          var tempArr = [];

          if (!rs) return;

          for (let i in rs) {

            provinces.push({
              value: i,
              label: i
            });

            tempArr = rs[i];
            rs[i] = [];
            for (let j in tempArr) {
              rs[i].push({
                value: j,
                label: j
              })
            }
          }
          self.provinces = provinces;
          self.rs = rs;

          if (lastCity) {
            self.citys = self.rs[lastCity.province];
          }
        }
      });
    },
    methods: {
      changeLocation() {
        this.showWeather = false;
      },
      isSelecting(v) {
        this.selecting = v;
      },
      onSubmitClick() {

        var self = this;

        reqwest({
          url: this.weatherDataUrl,
          data: {
            city: self.city
          },
          method: 'get',
          success: function (response) {
            if (response.data && response.data.weather) {
              self.weathercity = response.data.city;
              self.weather = response.data.weather;
              self.aqiColor = airColor(self.weather.aqi);
            }
          }
        });

        if (window.localStorage) {
          localStorage.setItem('weather_city', JSON.stringify({
            city: this.city,
            province: this.province
          }));
          Cookies.set('WEATHER_CITY', this.city, { expires: 100 });
        }

        self.showWeather = true;
      },
      onCancelClick() {
        this.showWeather = true;
      },
      handleProvinceChange(v) {
        if (this.rs) {
          this.citys = this.rs[v];
          this.city = this.citys[0].value;
        }
      },
      handleMouseEnter(e) {
        this.showPopup = true;
      },
      handleMouseLeave(e) {
        if (this.selecting) {
          return false;
        } else {
          this.showPopup = false;
        }
      }
    },
    watch: {
      weather: function(val) {
        this.iconClass = {
          today: 'weather-icon-' + val.weather_icon_id,
          tom: 'weather-icon-' + val.tomorrow_weather_icon_id,
          dat: 'weather-icon-' + val.dat_weather_icon_id
        };
      }
    }
  }
</script>



// WEBPACK FOOTER //
// weatherbox.vue?ef4e1b2c